<template>
  <div style="height: 100%">
    <div class="top-bar">
      <el-button type="primary" @click="addMxstgx()">新增</el-button>
    </div>
    <el-table
        :data="mxstgxList"
        stripe
        height="calc(100% - 28px)"
        style="width: 100%">
      <el-table-column
          label="序号"
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
          label="主表所在模型"
          prop="mxbm"
          width="230px">
        <template slot-scope="{row}">
          <span v-html=" getMxmc(row.mxbm) "></span>
        </template>
      </el-table-column>
      <el-table-column
          label="主实体表名"
          prop="zstbm"
          width="250px"
          show-overflow-tooltip>
        <template slot-scope="{row}">
          <span v-html="getZwmc(row.zstbm)"></span>
        </template>
      </el-table-column>
      <el-table-column
          label="从实体表名"
          prop="cstbm"
          width="250px"
          show-overflow-tooltip>
        <template slot-scope="{row}">
          <span v-html="getZwmc(row.cstbm)"></span>
        </template>
      </el-table-column>
      <el-table-column
          label="关联关系"
          prop="glgx"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="关联类型"
          prop="gllx"
          width="80px">
        <template slot-scope="{row}">
          {{ gllxObj[row.gllx] }}
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="cjsj"
          width="135px">
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="190px">
        <template slot-scope="{row}">
          <el-button @click="addMxstgx(row)">编辑</el-button>
          <el-button type="danger" @click="preDel(deleteMxstgx,row)" v-show="row.sfsc==='N'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <xj-dialog :title="(mxstgxForm.xmbm?'编辑':'新增')+'模型实体关系'" :visible="addMxstgxDialogVisible">
      <el-form :model="mxstgxForm" label-width="120px">
        <el-form-item label="主表所在模型">
          <el-select v-model="mxstgxForm.mxbm" filterable style="width:100%">
            <el-option
                v-for="item in sjmxData"
                :key="item.mxbm"
                :label="item.mxmc"
                :value="item.mxbm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主实体表名">
          <el-select
              filterable
              allow-create
              v-model="mxstgxForm.zstbm"
              style="width: 100%;">
            <el-option
                v-for="item in stTree"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="从实体表名">
          <el-select
              filterable
              allow-create
              v-model="mxstgxForm.cstbm"
              style="width: 100%;">
            <el-option
                v-for="item in stTree"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联类型">
          <el-select v-model="mxstgxForm.gllx" style="width: 100%;">
            <el-option
                v-for="(v,k) in gllxObj"
                :key="k"
                :label="v"
                :value="k">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联关系">
          <el-input type="textarea" rows="4" resize="none" v-model="mxstgxForm.glgx"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleAddMxstgxBtnClick(false)">取消</el-button>
        <el-button type="primary" @click="handleAddMxstgxBtnClick(true)">确定</el-button>
      </div>
    </xj-dialog>
  </div>
</template>

<script>
import commonMixins from "@/mixins/commonMixins";
import XjDialog from "@/components/XjDialog";
import {mapState} from "vuex";
import sjmxData from '../data/sjmxData'

export default {
  name: "Mxstgxgl",
  components: {XjDialog},
  mixins: [commonMixins],
  data() {
    return {
      sjmxData,
      gllxObj: {
        YDY: "一对一",
        YDD: "一对多",
      },
      mxstgxForm: {
        mxbm: '',
        zstbm: '',
        cstbm: '',
        gllx: '',
        glgx: '',
      },
      addMxstgxDialogVisible: false
    }
  },
  computed: {
    ...mapState(['stTree', 'stTreeObj', "mxstgxList"]),
  },
  mounted() {
    // this.queryMxstgxListByXmbm()
  },
  methods: {
    getMxmc(mxbm) {
      let item = this.sjmxData.find(item => item.mxbm === mxbm)
      return item ? `${item.mxmc}<br><span style="color:red">${mxbm}</span>` : mxbm
    },
    getZwmc(key) {
      let item = this.stTree.find(_ => _.value === key)
      return item ? `${item.label}<br><span style="color:red">${key}</span>` : `<span style="color:red">${key}</span>`
    },
    queryMxstgxListByXmbm() {
      this.$store.dispatch("loadMxstgxList")
    },
    addMxstgx(mxstgx) {
      mxstgx = mxstgx || {}
      this.mxstgxForm = {
        ...mxstgx
      }
      this.addMxstgxDialogVisible = true
    },
    async deleteMxstgx(mxstgx) {
      try {
        await this.$api.deleteMxstgx({mxstgxbm: mxstgx.mxstgxbm})
        this.$message({message: "删除成功", type: "success"})
        this.queryMxstgxListByXmbm()
      } catch (e) {
        return this.$message({message: e.message, type: "error"})
      }
    },
    async handleAddMxstgxBtnClick(isConfirm) {
      if (isConfirm) {
        try {
          if (this.mxstgxForm.mxstgxbm) {
            await this.$api.updateMxstgx({
              mxstgxbm: this.mxstgxForm.mxstgxbm,
              mxbm: this.mxstgxForm.mxbm,
              zstbm: this.mxstgxForm.zstbm,
              cstbm: this.mxstgxForm.cstbm,
              gxbm: this.mxstgxForm.gxbm,
              glgx: this.mxstgxForm.glgx,
              gllx: this.mxstgxForm.gllx,
              mxstlx: this.mxstgxForm.mxstlx,
            })
            this.$message({message: "修改成功", type: "success"})
          } else {
            await this.$api.addMxstgx({
              mxbm: this.mxstgxForm.mxbm,
              zstbm: this.mxstgxForm.zstbm,
              cstbm: this.mxstgxForm.cstbm,
              xmbm: this.xmItem.xmbm,
              gxbm: this.mxstgxForm.gxbm,
              glgx: this.mxstgxForm.glgx,
              gllx: this.mxstgxForm.gllx,
              mxstlx: this.mxstgxForm.mxstlx,
            })
            this.$message({message: "添加成功", type: "success"})
          }
          this.queryMxstgxListByXmbm()
        } catch (e) {
          return this.$message({message: e.message, type: "error"})
        }
      }
      this.addMxstgxDialogVisible = false
    }
  }
}
</script>
